import React, { useState, useEffect } from 'react';
import { Image, Swiper, Tabs, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './Home.module.css';

function Home() {
  const navigate = useNavigate();

  // 从本地存储获取用户信息和学校名称
  const [userInfo, setUserInfo] = useState(() => {
    const savedUserInfo = localStorage.getItem('userInfo');
    return savedUserInfo ? JSON.parse(savedUserInfo) : null;
  });

  // 从本地存储获取校园卡绑定状态，如果没有则默认为false
  const [isCardBound, setIsCardBound] = useState(() => {
    const savedStatus = localStorage.getItem('campusCardBound');
    return savedStatus === 'true';
  });

  // 当绑定状态变化时，保存到本地存储
  useEffect(() => {
    localStorage.setItem('campusCardBound', isCardBound.toString());
  }, [isCardBound]);

  // 轮播图数据
  const bannerItems = [
    {
      id: 1,
      image: 'https://img0.baidu.com/it/u=2821379896,1997156357&fm=253&app=120&f=JPEG?w=1422&h=800'
    },
    {
      id: 2,
      image: 'https://img2.baidu.com/it/u=4087616174,4019265257&fm=253&app=138&f=JPEG?w=1506&h=800'
    },
    {
      id: 3,
      image: 'https://img0.baidu.com/it/u=1419109900,2732419624&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800'
    }
  ];

  // 功能卡片数据
  const functionCards = [
    {
      title: '校园卡',
      subtitle: '余额查询',
      icon: '💳',
      color: '#FF6B6B',
      bgColor: '#FFE8E8'
    },
    {
      title: '云缴费',
      subtitle: '在线缴费',
      icon: '💰',
      color: '#4ECDC4',
      bgColor: '#E8FFFE'
    },
    {
      title: '课程表',
      subtitle: '课程安排',
      icon: '📚',
      color: '#45B7D1',
      bgColor: '#E8F4FD'
    },
    {
      title: '成绩查询',
      subtitle: '学业成绩',
      icon: '📊',
      color: '#96CEB4',
      bgColor: '#F0F9F4'
    },
    {
      title: '在线报修',
      subtitle: '设施维护',
      icon: '🔧',
      color: '#BD10E0',
      bgColor: '#F8E8FE'
    },
    {
      title: '全部应用',
      subtitle: '更多功能',
      icon: '⋯',
      color: '#778CA3',
      bgColor: '#F1F2F6'
    }
  ];

  // 校园动态数据 - 与图片数据保持一致
  const posts = [
    {
      id: 1,
      userId: 1, // 西瓜的用户ID
      author: '西瓜',
      avatar: '/33.png',
      time: '2分钟前',
      content: '毕业快乐',
      images: ['/dt.jpg', '/xt.png'], // 两张图片
      likes: 20,
      comments: 3,
      shares: 3 // 根据图片显示为3个分享
    },
    {
      id: 2,
      userId: 1, // 同样是西瓜发布的
      author: '西瓜',
      avatar: '/33.png',
      time: '2分钟前',
      content: '再见武汉大学',
      images: [],
      likes: 15,
      comments: 2,
      shares: 5
    }
  ];

  // 学校通知数据
  const notices = [
    {
      id: 1,
      title: '关于2024年春季学期期末考试安排的通知',
      content: '各学院、各位同学：现将2024年春季学期期末考试相关安排通知如下，请各学院认真组织，各位同学按时参加考试...',
      time: '2024-01-15',
      type: '教务通知',
      important: true,
      views: 1520
    },
    {
      id: 2,
      title: '武汉大学2024年樱花节活动安排',
      content: '为了更好地展示武汉大学的校园文化，让广大师生和游客欣赏到美丽的樱花，现将2024年樱花节活动安排公布如下...',
      time: '2024-01-12',
      type: '校园活动',
      important: false,
      views: 2340
    },
    {
      id: 3,
      title: '关于加强校园安全管理的通知',
      content: '为确保校园安全稳定，维护良好的教学科研环境，现就加强校园安全管理有关事项通知如下...',
      time: '2024-01-10',
      type: '安全通知',
      important: true,
      views: 980
    },
    {
      id: 4,
      title: '图书馆寒假开放时间调整通知',
      content: '根据学校寒假安排，图书馆开放时间将进行调整。具体安排如下：1月20日-2月15日期间，开放时间为上午8:30-下午5:30...',
      time: '2024-01-08',
      type: '服务通知',
      important: false,
      views: 756
    },
    {
      id: 5,
      title: '关于开展2024年度优秀学生评选的通知',
      content: '为表彰先进，树立典型，激励广大学生奋发向上，现开展2024年度优秀学生评选工作。评选条件和程序如下...',
      time: '2024-01-05',
      type: '学生工作',
      important: false,
      views: 1890
    }
  ];

  // 处理功能卡片点击
  const handleCardClick = (title) => {
    if (title === '校园卡') {
      // 根据绑定状态跳转到不同页面
      if (isCardBound) {
        navigate('/campus-card-bound'); // 跳转到已绑定页面
      } else {
        navigate('/campus-card-unbind'); // 跳转到未绑定页面
      }
    } else if (title === '云缴费') {
      // 跳转到云缴费页面
      navigate('/cloud-payment');
    } else if (title === '课程表') {
      // 跳转到课程表页面
      navigate('/course-schedule');
    } else if (title === '成绩查询') {
      // 跳转到成绩查询页面
      navigate('/grade-query');
    } else if (title === '图书馆') {
      // 跳转到图书馆页面
      Toast.show({
        content: '图书馆功能开发中...',
        position: 'center',
      });
    } else if (title === '在线报修') {
      // 跳转到在线报修页面
      navigate('/online-repair');
    } else if (title === '全部应用') {
      // 跳转到全部应用页面
      navigate('/all-apps');
    } else {
      // 其他功能卡片的点击处理
      Toast.show({
        content: `${title}功能开发中...`,
        position: 'center',
      });
    }
  };

  // 处理用户头像或姓名点击 - 跳转到用户详情页面
  const handleUserClick = (userId, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    navigate(`/user-profile/${userId}`);
  };

  // 处理动态卡片点击 - 跳转到动态详情页面
  const handlePostClick = (postId) => {
    navigate(`/post-detail/${postId}`);
  };

  // 处理动态互动
  const handleLike = (postId, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    Toast.show({
      content: '点赞成功！',
      position: 'center',
    });
  };

  const handleComment = (postId, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    Toast.show({
      content: '评论功能开发中...',
      position: 'center',
    });
  };

  const handleShare = (postId, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    Toast.show({
      content: '分享成功！',
      position: 'center',
    });
  };

  // 处理通知点击
  const handleNoticeClick = (notice) => {
    Toast.show({
      content: `查看通知：${notice.title}`,
      position: 'center',
    });
  };

  return (
    <div className={styles.homeContainer}>
      {/* 顶部学校名称 */}
      <div className={styles.schoolHeader}>
        <h1 className={styles.schoolName}>
          {userInfo?.schoolName || ''}
        </h1>
        <div className={styles.fullscreenIcon}>⛶</div>
        {/* 添加绑定状态指示器 */}
        <div className={styles.cardStatus}>
          校园卡: {isCardBound ? '已绑定' : '未绑定'}
        </div>
      </div>

      {/* 主要内容区域 - 添加滚动容器 */}
      <div className={styles.mainContent}>
        {/* 轮播图 */}
        <div className={styles.bannerContainer}>
          <Swiper autoplay loop>
            {bannerItems.map((item, index) => (
              <Swiper.Item key={item.id}>
                <div className={styles.banner}>

                  <div className={styles.bannerImages}>
                    <img src={item.image} alt={item.title} className={styles.bannerImage} />
                  </div>
                  <div className={styles.paginationIndicator}>
                    <span className={styles.currentPage}>{index + 1}</span>/{bannerItems.length}
                  </div>
                </div>
              </Swiper.Item>
            ))}
          </Swiper>
        </div>

        {/* 美化后的功能卡片 */}
        <div className={styles.cardGrid}>
          {functionCards.map((card, index) => (
            <div
              key={index}
              className={styles.card}
              onClick={() => handleCardClick(card.title)}
              style={{
                '--card-color': card.color,
                '--card-bg-color': card.bgColor
              }}
            >
              <div className={styles.cardIconWrapper}>
                <div className={styles.cardIcon}>{card.icon}</div>
              </div>
              <div className={styles.cardContent}>
                <div className={styles.cardTitle}>{card.title}</div>
                <div className={styles.cardSubtitle}>{card.subtitle}</div>
              </div>
            </div>
          ))}
        </div>

        {/* 动态和通知区域 */}
        <div className={styles.postsSection}>
          <Tabs>
            <Tabs.Tab title="校园动态" key="posts">
              <div className={styles.postsContainer}>
                {posts.map(post => (
                  <div
                    key={post.id}
                    className={styles.postItem}
                    onClick={() => handlePostClick(post.id)}
                  >
                    <div className={styles.postHeader}>
                      <div
                        className={styles.avatarContainer}
                        onClick={(e) => handleUserClick(post.userId, e)}
                      >
                        <img src={post.avatar} alt="avatar" className={styles.avatar} />
                      </div>
                      <div
                        className={styles.postInfo}
                        onClick={(e) => handleUserClick(post.userId, e)}
                      >
                        <div className={styles.authorName}>{post.author}</div>
                        <div className={styles.postTime}>{post.time}</div>
                      </div>
                      <div className={styles.moreActions}>⋯</div>
                    </div>
                    <div className={styles.postContent}>{post.content}</div>
                    {post.images && post.images.length > 0 && (
                      <div className={styles.postImages}>
                        {post.images.map((img, idx) => (
                          <div key={idx} className={styles.postImageContainer}>
                            <img src={img} alt={`post-${idx}`} className={styles.postImage} />
                          </div>
                        ))}
                      </div>
                    )}
                    <div className={styles.postActions}>
                      <div className={styles.actionButton} onClick={(e) => handleLike(post.id, e)}>
                        <span className={styles.actionIcon}>❤️</span> {post.likes}
                      </div>
                      <div className={styles.actionButton} onClick={(e) => handleComment(post.id, e)}>
                        <span className={styles.actionIcon}>💬</span> {post.comments}
                      </div>
                      <div className={styles.actionButton} onClick={(e) => handleShare(post.id, e)}>
                        <span className={styles.actionIcon}>🔄</span> {post.shares}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </Tabs.Tab>
            <Tabs.Tab title="学校通知" key="notices">
              <div className={styles.noticesContainer}>
                {notices.map(notice => (
                  <div
                    key={notice.id}
                    className={styles.noticeItem}
                    onClick={() => handleNoticeClick(notice)}
                  >
                    <div className={styles.noticeHeader}>
                      <div className={styles.noticeTitle}>
                        {notice.important && <span className={styles.importantTag}>重要</span>}
                        {notice.title}
                      </div>
                      <div className={styles.noticeType}>{notice.type}</div>
                    </div>
                    <div className={styles.noticeContent}>{notice.content}</div>
                    <div className={styles.noticeFooter}>
                      <span className={styles.noticeTime}>{notice.time}</span>
                      <span className={styles.noticeViews}>👁 {notice.views}</span>
                    </div>
                  </div>
                ))}
              </div>
            </Tabs.Tab>
          </Tabs>
        </div>
      </div>
    </div>
  );
}

export default Home;